$board-bg:#011031;
$board-slogan-bg:#c02e2d;
$border-before-w:50px;
$border-before-h:30px;
$border-r:20px;
$color-slogan:#dec16d;
*::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 7px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 7px;
    }
  *::-webkit-scrollbar-thumb {
    /*滚动条里面深色条*/
    border-radius: 15px;
    box-shadow: inset 0 0 5px rgba(236, 236, 236, 0.1);
    background: #ccc;
  }
  *::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(236, 236, 236, 0.1);
    border-radius: 15px;
    background: #ededed;
  }
  /* 隐藏滚动条样式 */
  .i-scrollbar-hide{
    &::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
    &::-webkit-scrollbar-track{
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb{
      background: #e8eaec;
    }
  }
  /* 极简滚动条样式 */
  .i-scrollbar{
    &::-webkit-scrollbar{
      width: 6px;
    }
    &::-webkit-scrollbar-track{
      background-color: transparent;
    }
    &::-webkit-scrollbar-thumb{
      background: #ccc;
      border-radius: 4px;
    }
  }
  @for $i from 0 through 100 {
    .vh-#{$i} {
      height: #{$i}vh; 
    }
  }
  @for $i from 0 through 100 {
    .vw-#{$i} {
      width: #{$i}vw; 
    }
  }
  .w-auto {
    width: auto;
  }
  @for $i from 0 through 100 {
    .w-#{$i} {
      width: #{$i} + '%'; 
    }
  }
  @for $i from 0 through 2500 {
    .w-#{$i}px {
      width: #{$i}px; 
    }
  }
  .h-auto {
    height: auto;
  }

  @for $i from 0 through 100 {
    .h-#{$i} {
      height: #{$i} + '%'; 
    }
  }
  @for $i from 0 through 2000 {
    .h-#{$i}px {
      height: #{$i}px; 
    }
  }
  .m-auto {
    margin: auto;
  }
  @for $i from 0 through 100 {
    .m-#{$i}px {
      margin: #{$i}px; 
    }
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  @for $i from 0 through 100 {
    .mx-#{$i}px {
      margin-left: #{$i}px; 
      margin-right: #{$i}px; 
    }
  }
  .my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  @for $i from 0 through 100 {
    .my-#{$i}px {
      margin-top: #{$i}px; 
      margin-bottom: #{$i}px; 
    }
  }
  .mt-auto {
    margin-top: auto;
  }
  @for $i from 0 through 100 {
    .mt-#{$i}px {
      margin-top: #{$i}px; 
    }
  }
  .mb-auto {
    margin-bottom: auto;
  }
  @for $i from 0 through 100 {
    .mb-#{$i}px {
      margin-bottom: #{$i}px; 
    }
  }
  .ml-auto {
    margin-left: auto;
  }
  @for $i from 0 through 100 {
    .ml-#{$i}px {
      margin-left: #{$i}px; 
    }
  }
  .mr-auto {
    margin-right: auto;
  }
  @for $i from 0 through 100 {
    .mr-#{$i}px {
      margin-right: #{$i}px; 
    }
  }
  .p-auto {
    padding: auto;
  }
  @for $i from 0 through 100 {
    .p-#{$i}px {
      padding: #{$i}px; 
    }
  }
  .px-auto {
    padding-left: auto;
  }
  @for $i from 0 through 100 {
    .px-#{$i}px {
      padding-left: #{$i}px; 
      padding-right: #{$i}px; 
    }
  }
  .py-auto {
    padding-top: auto;
    padding-bottom: auto;
  }
  @for $i from 0 through 100 {
    .py-#{$i}px {
      padding-top: #{$i}px; 
      padding-bottom: #{$i}px; 
    }
  }
  .pt-auto {
    padding-top: auto;
  }
  @for $i from 0 through 100 {
    .pt-#{$i}px {
      padding-top: #{$i}px; 
    }
  }
  .pb-auto {
    padding-bottom: auto;
  }
  @for $i from 0 through 100 {
    .pb-#{$i}px {
      padding-bottom: #{$i}px; 
    }
  }
  .pl-auto {
    padding-left: auto;
  }
  @for $i from 0 through 100 {
    .pl-#{$i}px {
      padding-left: #{$i}px; 
    }
  }
  .pr-auto {
    padding-right: auto;
  }
  @for $i from 0 through 100 {
    .pr-#{$i}px {
      padding-right: #{$i}px; 
    }
  }
  
  @for $i from 0 through 100 {
    .border-#{$i}px {
      border: #{$i}px; 
    }
  }

  @for $i from 0 through 100 {
    .font-#{$i}px {
      font-size: #{$i}px; 
    }
  }
  @for $i from 0 through 100 {
    .weight-#{$i}px {
      font-weight: #{$i}px; 
    }
  }
  .flex {
    display: flex;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .column {
    flex-direction: column;
  }
  .startX {
    justify-content: flex-start;
  }
  .startY {
    align-items: flex-start;
  }
  .betweenX {
    justify-content: space-between;
  }
  .betweenY {
    align-items: space-between;
  }
  .flex-auto {
    flex: 0 0 auto;
  }
  .flex-0 {
    flex: 0 0 0%;
  }
  .flex-1 {
    flex: 1 1 0%;
  }
  .center {
    justify-content: center;
    align-items: center;
  }
  .centerX {
    justify-content: center;
  }
  .centerY {
    align-items: center;
  }
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .visible {
    visibility: visible;
  }
  .invisible {
    visibility: hidden;
  }
  .hidden {
    display: none;
  }
  .disabled {
    pointer-events: none;
  }
  .block {
    display: block;
  }
  .inline-block {
    display: inline-block;
  }
  .inline {
    display: inline;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-hidden-i {
    overflow: hidden !important; 
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .bg-img-cover {
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bg-img-contain {
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .view-content {
    width: 100%;
    position: relative;
    overflow: auto;
    height: calc(100vh - 210px);
  }
  .bg-white {
    background-color: #fff;
  }
  @for $i from 0 through 2500 {
    .wrapper-#{$i}px {
      width: 100%;
      position: relative;
      overflow: auto;
      height: calc(100vh - (#{$i}px));
    }
  }

.border-decoration{
    border-radius:$border-r;
    box-shadow: rgb(29, 72, 196) 0px 0px 25px 3px inset;
    position: relative;
    &::before{
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      display: inline-block;
      border-top: 4px solid #ddd;
      border-left: 4px solid #ddd;
      width: $border-before-w;
      height: $border-before-h;
      border-radius:$border-r 0 0 0px;
      z-index: 2;
    }
    &::after{
      position: absolute;
      bottom: 0;
      right: 0;
      content: '';
      display: inline-block;
      border-bottom: 4px solid #ddd;
      border-right: 4px solid #ddd;
      width: $border-before-w;
      height: $border-before-h;
      border-radius:0 0 $border-r 0px;
      z-index: 2;
    }
  }
// 3840分辨率
.fs30{
    font-size: 30px;
}
.fs32{
    font-size: 32px;
}
.fs34{
    font-size: 34px;
}
.fs40{
    font-size: 40px;
}
@media screen and (max-width: 1920px){
    .fs30{
        font-size: 15px;
    }
    .fs32{
        font-size: 16px;
    }
    .fs34{
        font-size: 17px;
    }
    .fs40{
        font-size: 20px;
    }
}

@media screen and (max-width: 1000px){
    .fs30{
        font-size: 7px;
    }
    .fs32{
        font-size: 8px;
    }
    .fs34{
        font-size: 9px;
    }
    .fs40{
        font-size: 10px;
    }
}